<template>
	<view class="write-offs-list">
		<view class="search-wrapper flex-align">
			<view class="flex-grow-1 flex-align input">
				<van-icon name="search" size="18" />
				<input v-model="searchValue" placeholder="手机号/卡号" class="flex-grow-1"  @confirm='search'/>
			</view>
		</view>

		<view class="list"  v-for="(item,index) in ordersList" :key="index" >
			<!-- <navigator class="item d-flex" url="/page_admin/mobile-write-offs/write-offs-detail/write-offs-detail"> -->
			<view class="item d-flex" >
				<view style="margin-right: 20rpx;">
					<!-- <van-image width="80rpx" height="80rpx" round  /> -->
					<image :src="item.head_pic" mode="" style="width: 80rpx;height: 80rpx;border-radius: 50% 50%;"></image>
				</view>
				<view class="flex-grow-1">
					<view class="flex-space-between">
						<view class="flex-align">
							<view class="user-name">{{item.username}}</view>
							<view class="sex" v-if="item.sex == 1">男 </view>
							<view class="sex"  v-if="item.sex == 2">女</view>
							<view class="sex"  v-if="item.sex == 0">未知</view>
							<view class="sex" >{{item.base_age}}</view>
						</view>
						<view class="name">{{item.goods_name}}</view>
					</view>
					<view class="flex-space-between" style="margin-top: 20rpx;">
						<view class="flex-align">
							<view class="tel">{{item.phone}}</view>
							<view class="date">{{item.created_at}}</view>
						</view>
						<view class="value">-1</view>
					</view>
				</view>
			</view>
			<!-- </navigator> -->
		</view>
	</view>
</template>

<script>
	const index = require("@/api/index/index.js");
	export default {
		data() {
			return {
				searchValue: '',
				filterData: {},
				filterList: [{
						label: '时间范围',
						prop: 'time',
						options: [{
								label: '今日',
								value: 0
							},
							{
								label: '本月',
								value: 1
							},
							{
								label: '本年',
								value: 2
							},
						]
					},
					{
						label: '所属部门',
						prop: 'dept',
						options: [{
								label: '1号馆',
								value: 0
							},
							{
								label: '2号馆',
								value: 1
							},
							{
								label: '3号馆',
								value: 2
							},
							{
								label: '4号馆',
								value: 3
							},
						]
					},
					{
						label: '产品分类',
						prop: 'classify',
						options: [{
								label: '课程',
								value: 0
							},
							{
								label: '门票',
								value: 1
							},
							{
								label: '会员卡',
								value: 2
							},
							{
								label: '商品',
								value: 3
							},
							{
								label: '场地',
								value: 4
							},
						]
					},
				],
				listQuery: { //分页
					pageSize: 12,
					page: 1,
				},
				totalPage: "",
				ordersList:[],
				searchKey: "", //搜索关键词
				val:''
			}
		},
		onLoad(options) {
			console.log(options,'123123')
			this.type = options.type 
			// if (options.type == 1) {
			// 	this.today()
			// } else{
			// 	this.comsume_index()
			// }
		},
		onShow() {
		},
		methods: {
			// 搜索字
			search(val) {
				console.log(val,'12132')
				this.val = val.detail.value
				if (this.type == 1) {
					this.today()
				} else{
					this.comsume_index()
				}
			},
			// 今日核销
			async today() {
				let that = this;
					if (this.listQuery.page === 1) that.ordersList = [];
				let data = {
					page:this.listQuery.page,
					pageSize:this.listQuery.pageSize,
					code_no: this.val,
				};
				let res = await index.today(data);
				if (res.code == 1) {
					that.ordersList = that.ordersList.concat(res.data.list.data); //将数据拼接在一起
					that.totalPage = res.data.list.last_page
				}
			},
			// 历史核销
			async comsume_index() {
				let that = this;
				if (this.listQuery.page === 1) that.ordersList = [];
				let data = {
					page: this.listQuery.page,
					pageSize: this.listQuery.pageSize,
					code_no: this.val,
				};
				let res = await index.comsume_index(data);
				if (res.code == 1) {
					that.ordersList = that.ordersList.concat(res.data.data); //将数据拼接在一起
					that.totalPage = res.data.last_page
				}
			},
			// 下拉刷新
			onReachBottom() {
				if (this.totalPage <= this.listQuery.page) {
					uni.showToast({
						title: '没有更多了',
						duration: 2000,
						icon: 'none'
					});
					return
				}
				this.listQuery.page += 1;
				if (this.type == 1) {
					this.today()
				} else{
					this.comsume_index()
				}
			},
			onConfirm() {
				this.$refs.filter.toggle();
			},
			onChangeFilter(prop, value) {
				if (!this.filterData[prop]) {
					this.$set(this.filterData, prop, []);
				}
				if (this.filterData[prop].includes(value)) {
					this.filterData[prop].splice(this.filterData[prop].indexOf(value), 1)
				} else {
					this.filterData[prop].push(value);
				}
			},
			onReset() {
				this.filterData = {};
				this.$refs.filter.toggle();
			}
		},
	}
</script>

<style lang="scss" scoped>
	.write-offs-list {
		min-height: 100vh;
		background-color: rgb(242, 242, 242);
		padding-bottom: 40rpx;

		.search-wrapper {
			padding: 10rpx 30rpx;
			background-color: rgb(255, 255, 255);
			border-radius: 0px 0px 16rpx 16rpx;

			.input {
				padding: 0 28rpx;
				color: rgb(153, 153, 153);
				font-size: 26rpx;
				background-color: rgba(243, 247, 250, 0.95);
				border-radius: 33rpx;
				height: 66rpx;

				/deep/.van-icon {
					padding: 0 4rpx;
				}
			}

			/deep/.van-dropdown-menu {
				box-shadow: none;
				height: 96rpx;

				.van-dropdown-menu__title {
					color: #0E9698 ;
				}
			}
		}

		.filter-wrapper {
			.filter-list {
				padding: 10rpx 30rpx;
				border-bottom: solid 2rpx rgb(190, 190, 190);

				.filter-title {
					font-size: 28rpx;
					font-weight: 700;
					line-height: 28rpx;
					margin-bottom: 20rpx;
				}

				.filter-item {
					margin-bottom: 39rpx;
				}

				.option-item {
					width: 100%;
					font-size: 24rpx;
					font-weight: 500;
					background-color: rgb(243, 243, 243);
					border-radius: 10rpx;
					height: 60rpx;
					margin-bottom: 16rpx;

					&.active {
						background-color: rgba(99, 93, 247, 0.2);
						color: #0E9698;

						/deep/.van-icon {
							display: block;
						}
					}

					/deep/.van-icon {
						position: absolute;
						top: 50%;
						transform: translateY(-50%);
						left: 20%;
						display: none;
					}
				}
			}

			.btns {
				padding: 25rpx 40rpx 22rpx;

				/deep/.van-button {
					font-size: 32rpx;
					font-weight: 700;
				}

				.reset /deep/.van-button {
					color: rgb(136, 136, 136) !important;
				}
			}
		}



		.list {
			box-shadow: 0px 0px 8.36rpx 0.64rpx rgba(0, 0, 0, 0.05);
			background-color: #fff;
			border-radius: 10rpx;
			margin: 20rpx;

			.item {
				font-size: 22rpx;
				padding: 20rpx;
				border-bottom: solid 2rpx rgb(229, 229, 229);

				.sex {
					margin-left: 10rpx;
					color: rgb(153, 153, 153);
				}

				.name {
					color: rgb(136, 136, 136);
				}

				.value {
					color: #0E9698;
					font-size: 24rpx;
					font-weight: 700;
				}

				.tel {
					margin-right: 30rpx;
				}
			}
		}
	}
</style>